<template>
  <div class="item">
    <div class="avatar">
      <img :src="avatar" style="height: 40px; width: 40px; border-radius: 100%; margin-right: 8px;" alt="">
      <el-icon>
        <ArrowDown />
      </el-icon>
    </div>
    <div class="subItem">
      <i class="handle" @click="loginOut()">退出登录</i>
    </div>

  </div>


</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance, computed, watch, onBeforeMount } from "vue"
import { ArrowDown } from '@element-plus/icons-vue'
import { useStore, mapState } from "vuex"
import { elmessage,data } from "@/hook/hook"
import router from "@/router";
import { getAvatar, loginOu,getLoginState } from "@/api/authApi"
import { getHRAvatar } from "@/api/enterpriseApi"
import { getAdminAvatar } from "@/api/adminApi"
const store = useStore()
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例
// 头像
const avatar = ref()
// const Headerdata={
//     loginId: store.state.authState.loginId,
//   identity: store.state.authState.identity,
//   token: store.state.authState.token,
//   }
// 退出登录
const loginOut = () => {
  loginOu(data())
  store.commit("loginOut")
  localStorage.clear()
  elmessage("退出成功", "success")
  router.replace("/")
}


// // 采用async
const initAvatar =  () => {
  if (data().identity == "enterprise") {
    // if (store.state.hrState.hr.hrAvatarName == "") {
      // 请求顶栏的hr头像
       getHRAvatar(data()).then((res: any) => {
        if (res.data.type == "image.jpeg/png") {
          // 返回text/html表示请求图片失败
          avatar.value = window.URL.createObjectURL(res.data)
          store.state.hrState.hr.hrAvatarName = avatar.value
        } else {
          console.log(res.data["message"]);
        }
      })
    // } else {
    //   avatar.value = store.state.hrState.hr.hrAvatarName
    // }
  } else if (data().identity == "admin") {
    if (store.state.adminState.admin.adminAvatar==""){
      // 请求admin的头像
      getAdminAvatar(data()).then((res:any)=>{
        if (res.data.type == "image.jpeg/png") {
          // 返回text/html表示请求图片失败
          avatar.value = window.URL.createObjectURL(res.data)
          store.state.adminState.admin.adminAvatar = avatar.value
        } else {
          console.log(res.data["message"]);
        }
      })
    }else {
      avatar.value = store.state.adminState.admin.adminAvatar
    }
  }
}
const watchAdminAvatar = computed(() => store.state.adminState.admin.adminAvatar)
watch(watchAdminAvatar, (newval, oldval) => {
  avatar.value = store.state.adminState.admin.adminAvatar
}, { immediate: true })
const watchHRAvatar = computed(() => store.state.hrState.hr.hrAvatarName)
watch(watchHRAvatar, (newval, oldval) => {
  avatar.value = store.state.hrState.hr.hrAvatarName
}, { immediate: true })
// 检查登录状态
const getloginstate=()=>{
        getLoginState(data()).then((res:any)=>{
          if (res.data["code"]=="200"){
            if (res.data["isLogin"]=="true"){
            }else{
              store.commit("loginOut")
              // console.log(res.data["message"]);
              localStorage.removeItem("loginData")
            }
          }else{
            // console.log(res.data["message"]);
            localStorage.removeItem("loginData")
          }
        })
    }
onBeforeMount(() => {
  initAvatar()
  getloginstate()
})
</script>

<style scoped>
.handle {
  box-sizing: border-box;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-decoration: none;
}

.handle:hover {
  color: black;
}

.subItem {
  font-size: 16px;
  color: #86898e;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(213, 208, 213, 3);


  position: absolute;
  height: auto;
  width: 100px;
  background-color: azure;
  z-index: 99;

  cursor: pointer;
  display: none;
}


.item:hover .subItem {
  display: block;

}

.avatar {
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding-left: 15px;


}

.item {

  float: right;

  cursor: pointer;

}

#aside {
  background-color: red;
  height: 100vh;
}

#head {

  display: flex;
  align-items: center;
  background-color: aqua;
  justify-content: flex-end;
  padding-right: 100px;

}

#main {
  background-color: aquamarine;
}

#foot {
  background-color: antiquewhite;
}
</style>
